jquery代码实现一个3列6行的表格，第一列标头是序号，第二列标头是姓名，第三列标头是分数，隔行添加背景颜色，低于60分的标红,jquery代码实现一个3列6行的表格，第一列标头是序号，第二列标头是姓名，第三列标头是分数，隔行添加背景颜色，低于60分的标红,编程代码,站长入门,小晨网络技术服务工作室

jquery代码实现一个3列6行的表格，第一列标头是序号，第二列标头是姓名，第三列标头是分数，隔行添加背景颜色，低于60分的标红

时间 : 2023-06-29 编辑 :创始人

以下是使用jQuery代码创建一个3列6行的表格，并根据要求添加背景颜色和标红：

<!DOCTYPE html>
<html>
<head>
  <title>Table Example</title>
  <style>
    .table {
      border-collapse: collapse;
      width: 100%;
    }
    .table th, .table td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
    }
    .table th {
      background-color: #f2f2f2;
    }
    .table tr:nth-child(even) {
      background-color: #dddddd;
    }
    .table .red {
      color: red;
    }
  </style>
</head>
<body>
  <table class="table">
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>分数</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>张三</td>
        <td class="red">59</td>
      </tr>
      <tr>
        <td>2</td>
        <td>李四</td>
        <td>78</td>
      </tr>
      <tr>
        <td>3</td>
        <td>王五</td>
        <td class="red">55</td>
      </tr>
      <tr>
        <td>4</td>
        <td>赵六</td>
        <td>92</td>
      </tr>
      <tr>
        <td>5</td>
        <td>钱七</td>
        <td>80</td>
      </tr>
      <tr>
        <td>6</td>
        <td>孙八</td>
        <td class="red">45</td>
      </tr>
    </tbody>
  </table>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.table tr:even').addClass('even');
      $('.table td').each(function() {
        if ($(this).text() < 60) {
          $(this).addClass('red');
        }
      });
    });
  </script>
</body>
</html>

在上述代码中，我们使用了CSS样式来设置表格的样式，包括边框、内边距、背景颜色等。然后使用jQuery选择器和方法来选中表格的行和单元格，并添加相应的类名来实现隔行添加背景颜色和标红。